<template>
  <!-- 旋转环形 -->
  <!-- 归属组织泄露风险统计 -->
  <div class="chart-container" ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>
<script>
import * as echarts from 'echarts';
import { riskStatistics } from "@/api/IPOwnershipProtection/dataStatistics.js";
export default {
  name: '',
  created() {
      setTimeout(() => {
          this.initChart()
      }, 1000);
  },
  data() {
      return {
          chart: null,
      };
  },
  mounted() {
      this.initChart();
  },

  methods: {
      initChart() {
          let myChart = echarts.init(this.$refs.chartRef)
          riskStatistics().then(res => {
              let peopleList = [
                  { name: '确定风险关系', value: res.data.belongsCount, },
                  { name: '预测风险关系数量', value: res.data.preCount, },
                  { name: '总数据', value: res.data.totalCount, },
              ]
              let total = peopleList.reduce((pre, next) => {
                  return pre + next.value;
              }, 0);

              let numberWidth = String(total).length * 8 + 8;

              peopleList.forEach((item) => {
                  item.percent = total == 0 ? 0 : ((item.value / total) * 100).toFixed(2);
              });

              let color = ['rgba(113, 226, 135, 1)', 'rgba(119, 247, 253, 1)', 'rgba(44, 104, 231, 1)', 'rgba(93, 202, 250, 1)']

              let option = {
                  // backgroundColor: 'rgba(8, 19, 34,1)',
                  color: color,
                  tooltip: {
                      trigger: 'item',
                  },
                  legend: {
                      show: true,
                      orient: 'vertical',
                      top: 'center',
                      right: '5%',
                      icon: 'rect',
                      itemGap: 20,
                      itemWidth: 10,
                      itemHeight: 10,
                      color: '#fff',
                      formatter: function (name) {
                          let items = peopleList.find((item) => item.name == name);
                          return `{name|${name}}\n{number| ${items?.value || ''}} {unit|}            {percent|${items?.percent + '%' || ''
                              }}`;
                      },
                      itemStyle: {
                          borderWidth: 1,
                      },
                      textStyle: {
                          rich: {
                              number: {
                                  width: numberWidth,
                                  color: '#DDF6FD',
                                  align: 'left',
                                  fontSize: 16,
                                  fontWeight: 'bold',
                                  padding: [8, 0, 0, 0]
                              },
                              name: {
                                  color: 'rgba(255,255,255,0.8)',
                                  fontSize: 14,
                                  fontWeight: 400,
                                  fontFamily: 'Source Han Sans CN',
                                  padding: [28, 0, 0, 4]
                              },
                              unit: {
                                  color: 'rgba(255,255,255,0.8)',
                                  fontSize: 12,
                                  fontWeight: 400,
                                  fontFamily: 'Source Han Sans CN',
                                  padding: [0, 0, -8, 0]
                              },
                              percent: {
                                  color: '#DDF6FD',
                                  align: 'left',
                                  fontSize: 16,
                                  fontWeight: 'bold',
                                  padding: [6, 0, 0, 0]
                              },
                          },
                      },
                  },
                  title: [
                      {
                          text: '{title|风险统计}',
                          left: '29%',
                          top: '45%',
                          textAlign: 'center',
                          textStyle: {
                              rich: {
                                  title: {
                                      color: '#fff',
                                      fontSize: 18,
                                      fontWeight: '400',
                                  },

                              }
                          },
                      },
                      {
                          // text: '{num|' + total + '},{unit|人}',
                          left: '26%',
                          top: '47%',
                          textStyle: {
                              rich: {
                                  num: {
                                      fontSize: 32,
                                      color: '#9DDBFB',
                                      fontFamily: 'DIN Alternate',
                                      fontWeight: 'bold',
                                  },
                                  unit: {
                                      color: '#9DDBFB',
                                      fontSize: 14,
                                      fontWeight: '400',
                                      padding: [0, 0, -8, 8]
                                  }
                              }
                          },
                      },
                  ],

                  series: [
                      {
                          type: 'pie',
                          radius: ['50%', '60%'],
                          center: ['30%', '50%'],
                          padAngle: 5,
                          label: {
                              show: false,
                          },
                          itemStyle: {
                              shadowColor: 'rgba(255, 255, 255, 0.5)',
                              shadowBlur: 20,
                              borderWidth: 5,
                              borderRadius: 5,

                          },
                          emphasis: {
                              scale: false
                          },
                          data: peopleList,
                      },
                      {
                          type: 'pie',
                          radius: ['40%', '50%'],
                          center: ['30%', '50%'],
                          padAngle: 5,
                          label: {
                              show: false,
                          },
                          itemStyle: {
                              shadowColor: 'rgba(255, 255, 255, 0.5)',
                              shadowBlur: 20,
                              borderWidth: 5,
                              opacity: 0.3,
                          },
                          emphasis: {
                              scale: false
                          },
                          data: peopleList,
                      },


                      {
                          name: "",
                          type: "pie",
                          startAngle: 85,
                          radius: ['35%', '38%'],
                          center: ['30%', '50%'],
                          hoverAnimation: false,
                          startAngle: 90,
                          padAngle: 5,
                          tooltip: {
                              show: false,
                          },
                          itemStyle: {
                              borderCap: 'round',
                              normal: {
                                  color: function (data) {
                                      let tempColor = data.data == 10 ? "rgba(240, 197, 67, 0)" : "rgba(240, 197, 67, 1)"
                                      return tempColor
                                  },
                              },
                          },
                          zlevel: 4,
                          labelLine: {
                              show: false,
                          },
                          data: [100, 100, 100, 100],
                      },

                  ],
              }


              let rotate = 0
              let deg = 50

              run()

              function run() {
                  option.series[1].radius[1] = `${deg}%`
                  option.series[2].startAngle = rotate
                  myChart.setOption(option)
                  myChart.resize()
                  rotate += 1
                  if (deg > 80) {
                      deg = 50
                  }
                  deg += 0.1
                  requestAnimationFrame(run)
              }

              // 柱状图的宽度，y是x的一半

              this.myChart.setOption(option);

              // 监听窗口大小变化，用于自适应  
          })
      },
  }
};  
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  /* background-color: #817979; */
}
</style>